import React from 'react';
import { Router, Route, Link } from 'react-router'
import Header from './js/components/header';

import DoctorStore from './js/doctorStore';
import {Actions} from './js/doctorStore/actions';
require('./css/doctors')
function getDoctors(id){
    return DoctorStore.getDoctorsByDep(id)
}
function getDepName(dep){
    return DoctorStore.getDep(dep).name
}
function getTitle(id){
    return DoctorStore.getTitle(id).name
}
export default class DoctorsList extends React.Component{
    componentDidMount(){
        Actions.ctrlNav({show:false,active:1});
    }
    renderDoctors(data,cate){

            return data.map(d=>{
                return (
                    <li key={d.id}>
                        <Link to={'/doctor-detail/:'+d.id} query={{'cate':cate}}>
                            <dl>
                                <dt>
                                    {d.name}
                                    <span>{getDepName(d.depart)}</span>
                                    <span>{getTitle(d.title)}</span>
                                </dt>
                                <dd className="avatar"><img src={"../src/img/doctor-avatar/"+d.id+".jpg"} /></dd>
                                <dd className="skill">{d.info.skill}</dd>
                                <dd className="price">￥<span>{d.price[0].price}</span>起</dd>
                            </dl>
                        <span className="right-arrow"></span>
                        </Link>

                    </li>
                )
            })


    }
    render(){
        const _id = this.props.params.id.replace(':','');
        let result = getDoctors(_id);
        return (
            <div>
                <Header title='医生列表'>
                    <Link to='/call-doctor' className="l1">返回</Link>
                </Header>
                {result instanceof Object?
                    <div>
                        <h2 className="result-info">{result.dep + '有'+result.len+'位合适的医生'}</h2>
                        <ul className='doctors-result'>{this.renderDoctors(result.data,_id)}</ul>
                    </div>
                    :<div className='non-result'>{result}</div>
                }

            </div>
        )
    }
}